<template>
  <div class="ucenter app-space">
    <!-- header -->
    <Header></Header>
    <!-- main -->
    <!-- children -->
    <van-tabs v-model="active" :z-index="999" class="sign-tabs">
      <!--  to="/SignIndex" -->
      <van-tab>
        <template #title>
          <span class="tab-span">找驾校</span>
        </template>
        <find-school></find-school>
      </van-tab>
      <!-- to="/SignIndex2" -->
      <van-tab>
        <template #title>
          <span class="tab-span">找教练</span>
        </template>
        <!-- 找教练  -->
        <find-coach></find-coach>
        <!-- 结束 -->
      </van-tab>
      <!--  to="/SignIndex3" -->
      <van-tab>
        <template #title>
          <span class="tab-span">找陪练</span>
        </template>
        <partner-training></partner-training>
      </van-tab>
    </van-tabs>
    <!-- footer -->
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "./Header";
// 引入底部组件
import Footer from "../Footer";
// 引入组件
import FindSchool from "./FindSchool.vue";
import FindCoach from "./FindCoach.vue";
import PartnerTraining from "./PartnerTraining.vue";

export default {
  data() {
    return {
      active: 0
    };
  },
  created() {
    if (sessionStorage.getItem("active")) {
      this.active = Number(sessionStorage.getItem("active"));
      // console.log(typeof sessionStorage.getItem("active"));
    }
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.setItem("active", this.active);
    next();
  },

  components: {
    Header,
    Footer,
    FindSchool,
    FindCoach,
    PartnerTraining
  }
};
</script>
<style>
.tab-item:hover {
  color: #0b59cd;
}
.tab-item.checked {
  color: #0b59cd;
}
</style>
